{include_core file="lib/header.html" title="商品评价" center="center"}
{include_core file="lib/top_nav.html"}
<script>
$(function(){
	$('.circt .circt-box').mouseenter(function(){
		$(this).children('.circt-add').css('display','block');
	}).mouseleave(function(){
		$(this).children('.circt-add').css('display','none');
	});
});
</script>
      <div class="container">
        <div class="inner">
          <div class="con-top clearfix">
          {include_core file="lib/sidebar.html" crumbs_1="service" crumbs_2="comment"}
            <div class="evaluate clearfix">
              <div class="teal clearfix">
                <div class="teal-txt">
                  <h3>商品评价</h3>
                  <span>感谢您在NBD网购买商品。我们真诚的邀请您对购买到的商品发表使用感受和评价。</span>
                  
                  {*<ul class="clearfix">
                    <li class="curr"><a href="javascript:void(0);">待评价商品</a>|</li>
                    <li><a href="javascript:void(0);">已评价商品</a></li>
                    <!-- <li>|<a href="javascript:void(0);">评价失效商品</a></li> -->
                  </ul>*}
                </div>
              </div>

              <div class="talk" style="margin-top:30px;">
                <table>
                  <tr>
                    <th>商品详情</th>
                    <th>购买时间</th>
                    <th>订单号</th>
                  </tr>
                  <tr>
                    <td class="talk-no">
                      <dl class="clearfix">
                        <dt><img src="{_image($sku_snapshot_info.sku_cover)}" width="100" height="100"/></dt>
                        <dd>
                          <div>{$sku_snapshot_info.goods_title}</div>
                          <div></div>
                        </dd>
                      </dl>
                    </td>
                    <td class="talk-box">{$order_info.add_time}</td>
                    <td class="talk-box">{$order_info.id}</td>
                  </tr>
                </table>
                <form action="{AnUrl('comment/save')}" method="post" id="form">
                <input type="hidden" name="order_relation_id" class="js_id" value="{$order_relation_info.id}">
                <input type="hidden" name="comment_id" class="" value="{$comment_id}">
                <div class="sepk">
                  <ul>
                    <li>
                      <span>*</span>
                      <em>评分：</em>
                      <div class="sepk-s">
                        {for $a=1 to 5}
                          <a href="javascript:void(0);" class="{if $a > $comment_info.star}sepk-curr{/if} js_star" data-num="{$a}"></a>
                        {/for}
                        <input type="hidden" name="star" value="{$comment_info.star}" class="js_checkStar">
                      </div>
                    </li>
                    <li>
                      <span>*</span>
                      <em>标签：</em>
                        {$label_list = comment_helper::get_comment_label(100000)}
                      <div class="sepk-box">
                        {foreach $label_list as $k=>$v}
                        <div><label><input type="checkbox" class="js_label" name="label[]" value="{$v.id}" {if in_array($v.id, $label)}checked{/if}/><span>{$v.title}</span></label></div>
                        {/foreach}
                        <div class="js_ico"><em class="ico"></em><span>自定义</span></div>
                      </div>
                    </li>
                    <li class="sepk-b3 clearfix">
                      <span>*</span>
                      <em>评价：</em>
                      <label><textarea class="js_title" placeholder="求表扬、求指正、求PK、求您的真实感~" name="title">{$comment_info.title}</textarea></label>
                    </li>
                    <li>
                      <em>晒单：</em>
                    <style>
                      .image-input{
                        width: 62px;
                        height: 62px;
                        position: absolute;
                        z-index: 88px;
                        top:0px;
                        filter:alpha(opacity=0);
                        -moz-opacity:0;
                        opacity:0;
                      }
                      .peninfo ul li.pen-curr>span{
                        display: inline-block !important;
                      }
                      #js_fileUpload{
                        top: 0;
                        margin-top: -65px;
                      } 
                    </style>
                      {$img = comment_helper::get_comment_img($comment_id)}
                      <div class="sepk-list js_imageDiv">
                        {foreach $img as $k=>$v}
                        <div class="sepk-wary">
                           <div class="sepk-test"><a href="javascript:void(0);"><img src="{_image($v.path, 'small')}"><input type="hidden" name="image[]" value="{$v.id}"></a></div>
                           <div class="sepk-close" style="display: none;">
                            <a href="javascript:void(0);" class="js_deleteImg"><img src="../images/close3.png"></a>
                          </div>
                        </div>
                        {/foreach}
                        <div style="position:relative;float:right;margin-top:-3px;" class="js_imageInput">
                          <a class="sepk-add" href="javascript:void(0);"><img src="../images/add.png"></a>
                          <input id="js_fileUpload" class="image-input" type="file" name="Filedata" multiple data-url="{AnUrl("core/handler/file_uploader/uploadify")}">
                        </div>
                      </div>
                      <div class="submit"><a href="javascript:void(0)" class="js_submit">评价</a></div>
                    </li>
                  </ul>
                </div>
                </form>
              </div>
              <!--talk  end-->
            </div>
            <!--evaluate end-->
          </div>
          <!--con-top  end-->
        </div>
        <!--inner  end-->
      </div>
      <!--container  end-->
{load_js file="uploadify/jquery.uploadify.min.js"}
<script>
$(function(){
  setTimeout(function(){
    $('#js_fileUpload').uploadify({
      'swf'        : siteUrl+'/js/uploadify/uploadify.swf',
      'uploader'   : siteUrl+'/core/handler/file_uploader/uploadify',
      'queueID'    : 'queue',
      'width'      : '62',
      'height'     : '62',
      'buttonText' : '',
      'dataType'   : 'json',
      'formData'   : {
        'res_name'  : "comment",
        'res_id'    : '{if $comment_id}{$comment_id}{else}0{/if}'
      },
      'onUploadStart': function (fileObj) {
        var fileName = fileObj.name;
        if ($('div[data-name="'+ fileName +'"]').length > 0) {
          //showMsg("已存在名为:" + fileName + "的文件，请重新选择文件！");
          this.cancelUpload(fileObj.id);
        }
      },
      'onUploadSuccess': function(error, content)  {
        var image = $.parseJSON(content);
        var imgPath = image.small;
        var fileId  = image.id;
        var fileName = image.file_name;
        
        var img = '<img src="' + imgPath + '" /><input type="hidden" name="image[]" value="'+fileId+'">';
        var html = '<div data-name="'+fileName+'" class="sepk-wary"><div class="sepk-test"><a href="javascript:void(0);">'+img+'</a></div><div class="sepk-close" style="display: none;"><a href="javascript:void(0);"  class="js_deleteImg"><img src="'+siteUrl+'/images/close3.png"></a></div></div>';
        $('.js_imageInput').before(html);
      },
      'onError' : function (event, ID, fileObj, errorObj) {
        if (errorObj.type === "File Size"){
          showMsg('超过文件上传大小限制（2M）！');
          return;
        }
        showMsg(errorObj.type + ', Error: ' + errorObj.info);
      }
    });
  }, 10);

  // 删除已上传图片
  $('.js_imageDiv').on('click', '.js_deleteImg', function(){
    $(this).parent().parent().remove();
  });
  
  $('.js_star').click(function(){
    $(this).removeClass('sepk-curr').prevAll('.js_star').removeClass('sepk-curr');
    $(this).nextAll('.js_star').addClass('sepk-curr');
    $('.js_checkStar').val($(this).data('num'));
  })
  
  $('.js_star').hover(function(){
    $(this).removeClass('sepk-curr').prevAll('.js_star').removeClass('sepk-curr');
    $(this).nextAll('.js_star').addClass('sepk-curr');
    $('.js_checkStar').val($(this).data('num'));
  })
  
  $('.js_ico').click(function(){
    var html = '<div>标签：<input type="text" class="label" style="width:30px"></div>';
    $(this).before(html);
  })
  
  $('.js_submit').click(function(){
    var star = $('.js_checkStar').val();
    var label = $('.js_label:checked').val();
    var title = $('.js_title').val();
    var id = $('.js_id').val();
    if (!id) {
      return false;
    }
    
    if (!star) {
      showMsg('请选择星级');
      return false;
    }
    if (!label) {
      showMsg('请选择评价标签');
      return false;
    }
    if (!title) {
      showMsg('请填写评论内容');
      return false;
    }

    $('#form').submit();
  })
  
  $('.sepk-box').on('blur', '.label', function(){
     var val = $(this).val();
     if (val) {
       var html = '<div><label><input class="js_label" type="checkbox" name="label[]" value="'+val+'" checked><span>'+val+'</span></label></div>';
       $(this).parent().after(html);
       $(this).parent().remove();
     } else {
       
     }
  })
})

function viewImage(file)
  {
    if (typeof FileReader == "undefined") {
      return false;
    }

    var f = file;

    if (!isAllowFile(f.name)) {
      showMsg("请上传常规格式的图片,如：jpg, png等");
      return false;
    }

    var reader = new FileReader();
    reader.onload = (function(theFile){
      return function (e) {
        var tmpSrc = e.target.result;
        if (tmpSrc.lastIndexOf('data:base64') != -1) {
          tmpSrc = tmpSrc.replace('data:base64', 'data:image/jpeg;base64');
        } else if (tmpSrc.lastIndexOf('data:,') != -1) {
          tmpSrc = tmpSrc.replace('data:,', 'data:image/jpeg;base64,');
        }

        var img = '<img src="' + tmpSrc + '" />';
        if ($('div[data-name="'+ f.name +'"]').length > 0) {
          $('div[data-name="'+ f.name +'"]').remove();
        }
        var html = '<div data-name="'+ f.name+'" class="sepk-wary"><div class="sepk-test"><a href="javascript:void(0);">'+img+'</a></div><div class="sepk-close js_deleteImg" style="display: none;"><a href="javascript:void(0);"><img src="'+siteUrl+'/images/close3.png"></a></div></div>';
        $('.js_imageInput').before(html);
      };
    })(f)
    reader.readAsDataURL(f);
  }
  
function checkFileNames(fileName){
  var isR = 0;
  $('.js_image').each(function(){
    var imageTitle = $(this).attr('title-data');
    if (imageTitle == fileName) {
      isR = 1;
      return;
    }
  });
  if (isR == 1) {
    return true;
  } else {
    return false;
  }  
}
function addSpace() {
  var maxPicData = new Array();
  var needSpace = 0;
  $('.js_upPic').each(function(){
    var picData = $(this).attr('pic-data');
    maxPicData.push(picData);
    if ($(this).attr('have-data') == 1) {
      needSpace++;
    }
  });

  var maxData = Math.max.apply(null, maxPicData);
  if (maxData - needSpace < 1) {
    var value = maxData + 1;
    $('.js_picNum_'+maxData).after('<div class="js_upPic js_picNum_'+value+'" have-data="0" pic-data="'+value+'"></div>');
  };
}
</script>
{include_core file="lib/footer.html"}